<script setup lang="ts">
const deviceType = useState('deviceType');
const route = useRoute();
</script>

<template>
  <main class="h-screen flex gap-6 mx-auto p-20 overflow-hidden max-w-7xl max-lg:flex-col max-lg:p-4 max-lg:h-auto max-lg:overflow-y-auto">
    <MobileBar v-if="deviceType === 'mobile'"/>
    <AsideComp v-if="deviceType === 'web' || route.path === '/about'"/>
    <section class="w-3/4 flex flex-col bg-neutral-900 rounded-lg border-1 overflow-hidden max-lg:w-full">
      <HeaderComp />
      <main id="main" class="text-white flex-1 overflow-auto max-lg:h-auto">
        <div class="px-6 py-6 h-full max-lg:p-2">
          <slot />
        </div>
      </main>
    </section>
  </main>
</template>

<style lang="scss" scoped>
</style>